<template>
  <div class="page logo">
    <div class = 'logo'>
      <img src="./logo.png" alt="mingxiaologo">
      <p>第十八届明天小小科学家奖励活动(上海地区)</p>
      
    </div>
    <div class = 'logintitle'>{{title}}</div>
    <div class = 'User'>
    <div class = 'user'>
      <div class = 'info'>
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="账号" prop="name">
              <el-input v-model="form.name" style="width:300px;" size='mini'></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password" style="width:300px;" size='mini'></el-input>
            </el-form-item>
            <el-form-item label="验证码" class = 'last' prop="code">
              <el-input v-model="form.code" style="width:300px;" size='mini'></el-input>
              <div style="display:flex;align-items: center; margin-top:10px;">
                <s-identify :lineColorMax="lineColorMax" :identifyCode="identifyCode"></S-identify>
                <el-button @click="refreshCode" type="text">看不清楚</el-button>
              </div>
              
            </el-form-item>
          </el-form>
      </div>
      <div class = 'or' v-if="isUser">
        <div>
          <el-button type="text" @click="registerVisible = true">注册</el-button>
          <el-button type="text" @click="forgetPass = true">忘记密码</el-button>
        </div>
      </div>
      <div class = 'operate'>
        <button class = 'btn' @click="gohome">登录</button>
      </div>
    </div>
    </div>
    <Register @close="close" @showRuleForm="formUpload" :registerVisible='registerVisible'></Register>
    <forget :show="forgetPass" @close="close"></forget>
     <a target="_blank" class="bottominf" href="http://www.miitbeian.gov.cn/">备案号: 沪ICP备14033392号-1</a>
  </div>
</template>

<script type="text/ecmascript-6">
import SIdentify from "./alert/code";
import Register from "./alert/register";
import forget from "./alert/forget";
import { login } from "../../function/login";
import { register } from "../../function/register";
export default {
  data() {
    const checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      if (value !== this.identifyCode) {
        return callback(new Error("验证码错误"));
      }
      callback();
    };
    return {
      isUser: false,
      forgetPass: false,
      lineColorMin: 0,
      lineColorMax: 0,
      dotColorMax: 0,
      dotColorMin: 0,
      identifyCodes: "1234567890",
      identifyCode: "",
      registerVisible: false,
      form: {
        name: null,
        password: null,
        code: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      title: "",
      rules: {
        name: [{ required: true, message: "请输入您的账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [
          {
            required: true,
            trigger: "blur",
            validator: checkCode
          }
        ]
      }
    };
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    close() {
      this.registerVisible = false;
      this.forgetPass = false;
    },
    formUpload(data) {
      register(data.data, this);
      this.registerVisible = data.isShow;
    },
    gohome() {
      let usertype = this.$route.query.id;
      this.$refs["form"].validate(valid => {
        if (valid) {
          login(usertype, this);
        } else {
          this.$message.error('请确认账号和密码')
          return false;
        }
      });
    },
    judge() {
      let id = this.$route.query.id;
      switch (id) {
        case "1":
          this.title = "用户登录";
          this.isUser = true
          break;
        case "2":
          this.title = "审核登录";
          break;
        case "3":
          this.title = "评委登录";
          break;
        case "4":
          this.title = "管理员登录";
          break;
        default:
          break;
      }
    }
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    this.judge();
  },
  components: {
    Register,
    SIdentify,
    forget
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
